<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义marker样式</title>
</head>
<script charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }

    #set-style{
        position: absolute;
        left: 30px;
        top: 30px;
        z-index: 9999;
        padding: 10px;
    }
</style>

<body>
    <div id="container"></div>
    <input type="button" id="set-style" onclick="setStyle()" value="setStyle">
    <script>
        var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            center: center
        });

        //初始化marker
        var marker = new TMap.MultiMarker({
                id: 'marker-layer',
                map: map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 25,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                    })
                },
                geometries: [{
                    "id": 'demo',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(39.984104, 116.307503),
                    "properties": {
                        "title": "marker"
                    }
                }]
            });  
        
        function setStyle(){
            //更换marker样式方法
            marker.setStyles({"marker": new TMap.MarkerStyle({
                "width": 70,
                "height": 70,
                "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png',
                "opacity": 0.5
            })})
        } 
         //监听点击事件添加marker
         map.on("click", (evt) => {
           
            marker.add({
            	position: evt.latLng
            });                      
        });
    </script>
</body>

</html>